<template>
	<view class="page-list">
		<template v-if="listData.length > 0">
			<template v-for="(item, index) in listData" :key="index">
				<slot name="item" :item="item" :index="index"></slot>
			</template>
			<load-more :isLoadingMore="pageState.loadingMore" :hasMore="pageState.hasMore"></load-more>
		</template>
		<template v-else>
			<template v-if="slots.empty">
				<slot name="empty"></slot>
			</template>
			<view v-else class="page-list-empty">
				<image src="https://soonsmart.keji.io/douyin/assets/empty.png" />
				<text>{{ emptyText }}</text>
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, onUnmounted, ref, reactive, watch, useSlots } from 'vue';
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import LoadMore from '@/components/load-more/load-more.vue';
	import { EventBus } from '@/utils/event-bus';
	import { type BaseResponse } from '@/webApis/base';
	const props = defineProps({
		api: {//api获取list
			type: Function,
			required: true,
		},
		overWriteItem: {
			type: Function,
		},
		searchParams: {
			type: Object,
			default: () => { },
		},
		emptyText: {
			type: String,
			default: '暂无内容',
		},
		pageSize: {
			type: Number,
			default: 15,
		},
	})

	const emits = defineEmits(['query']);

	const slots = useSlots();

	watch(props.searchParams, () => {
		refreshList();
	})
	onMounted(() => {
		refreshList();
		EventBus.subscribe('refreshList', refreshList);
	})
	onUnmounted(() => {
		EventBus.unsubscribe('refreshList', refreshList);
	})
	onPullDownRefresh(async () => {
		console.log('onPullDownRefresh')
		await refreshList();
		uni.stopPullDownRefresh();
	})
	onReachBottom(async () => {
		console.log('onReachBottom')
		if (pageState.hasMore && !pageState.loadingMore) {
			pageState.pageNum++;
			pageState.loadingMore = true;
			console.log('分页加载更多', pageState.pageNum);
			await getList();
			pageState.loadingMore = false;
		}
	})
	const pageState = reactive({
		loading: false,
		loadingMore: false,
		hasMore: true,
		pageNum: 1,
		pageSize: props.pageSize,
		total: 0,
	});
	const listData = ref<any>([]);

	const getList = async () => {
		try {
			console.log("getList", `pageNum=${pageState.pageNum}`);
			pageState.loading = pageState.pageNum == 1;
			const res : BaseResponse = await props.api({
				pageNum: pageState.pageNum,
				pageSize: pageState.pageSize,
				...props.searchParams,
			});
			pageState.total = res.total ?? 0;
			let list = res.rows;
			if (props.overWriteItem) {
				list = res.rows?.map((item : any) => props.overWriteItem!(item));
			}
			if (pageState.pageNum == 1) {
				listData.value = list ?? [];
			} else {
				listData.value = listData.value.concat(list);
			}
			// console.log('加载list', JSON.stringify(listData.value));
			pageState.loading = false;
			pageState.hasMore = listData.value.length < pageState.total;
		} catch (e) {
			pageState.loading = false;
		}
	}
	const refreshList = async () => {
		pageState.pageNum = 1;
		pageState.total = 0;
		pageState.hasMore = true;
		await getList();
	}

	defineExpose({
		refreshList,
	})
</script>

<style lang="scss" scoped>
	.page-list {
		display: flex;
		flex-direction: column;

		&-empty {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 224px;
				height: 168px;
			}

			text {
				color: #8c8c8c;
				font-size: 13px;
				text-align: center;
			}
		}
	}
</style>